<template>
	<view class="wh p10">
		<view class="p10 c8">基础信息</view>

		<u--form ref="uForm" labelPosition="left" :model="userInfo"
			:labelStyle="{'font-size':'14px','padding':'10rpx 0'}" :rules="rules">
			<view class="card p-0-10 bf" style="border-radius: 6px;">
				<u-form-item label="手机号" prop="mobile" labelWidth="160rpx" :required="true">
					<!-- <view class="dfbc">
						<view class="dfa f15" style="width: 160rpx;">
							<text class="cf5 mr5">*</text>
							<text class="">手机号</text>
						</view>
						<view class="f-1 f-x-e">
							<u--input v-model="userInfo.mobile" border="none" placeholder="请输入手机号"></u--input>
						</view>
					</view> -->
					<u--input v-model="userInfo.mobile" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="真实姓名" prop="name" labelWidth="160rpx">
					<u--input v-model="userInfo.realname" border="none" placeholder="请输入真实姓名"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="sex" labelWidth="160rpx">
					<u-radio-group v-model="userInfo.sex" placement="row" icon-color="#000" size="16">
						<u-radio :activeColor="subColor" label="男" :name="1"></u-radio>
						<u-radio :activeColor="subColor" label="女" :name="2"></u-radio>
					</u-radio-group>
				</u-form-item>
				<view>
					<u-form-item label="生日" prop="birthday" @click="show = true" labelWidth="160rpx">
						<u--input v-if="userInfo.birthday==''" v-model="userInfo.birthday" type="text" disabled
							disabledColor="#ffffff" placeholder="请选择" border="none">
						</u--input>
						<view v-else>{{userInfo.birthday|formatDate}}</view>
						<u-icon slot="right" name="arrow-down" color="#999" size="14" style="margin-right: 5px;"></u-icon>
					</u-form-item>
				</view>
				<u-form-item label="会员等级" prop="birthday" labelWidth="160rpx">
					<uni-data-select v-model="userInfo.vipId" :localdata="groupList" style="padding-left: 200rpx;" class="f-x-e">
					</uni-data-select>
				</u-form-item>
			</view>
			<!-- <view class="p10 c8">高级权限</view>
			<view class="card p-0-10 bf" style="border-radius: 6px;">
				<u-form-item label="会员等级" prop="vip" labelWidth="160rpx">
					<uni-data-select v-model="userInfo.vip" placeholder="请选择会员等级" :localdata="range" @change="change">
					</uni-data-select>
				</u-form-item>
				<u-form-item label="商品折扣" prop="discount" labelWidth="160rpx">
					<u--input v-model="userInfo.discount" border="none" placeholder="请输入商品折扣"></u--input>
				</u-form-item>
				<u-form-item label="余额" prop="balance" labelWidth="160rpx">
					<u--input v-model="userInfo.balance" border="none" placeholder="请输入余额"></u--input>
				</u-form-item>
				<view class="desc">
					<u-form-item label="积分" prop="integral" labelWidth="160rpx">
						<u--input v-model="userInfo.integral" border="none" placeholder="请输入积分"></u--input>
					</u-form-item>
				</view>
			</view> -->
			<!-- <view class="p10 c8">其他</view>
			<view class="card p-0-10 bf" style="border-radius: 6px;"></view> -->
			<!-- <u-form-item class="tabs" label="标签" prop="tag" @click="showTag = true" labelWidth="160rpx">
				<u--input v-model="userInfo.tag" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<view class="desc">
				<u-form-item label="备注" prop="tag" @click="showTag = true">
				</u-form-item>
			</view>
			<u-textarea v-model="userInfo.desc" border="none" placeholder="请填写备注信息,最多200字" count maxlength="200">
			</u-textarea> -->
		</u--form>
		<view class="p10 but">
			<u-button text="确认办理" size="large" color="linear-gradient(to right, #fee14f, #fdc450)"
				:customStyle="{color:'#000',fontWeight:'bold'}" shape="circle" @click="submit"></u-button>
		</view>
		<!-- 弹出层 -->
		<u-toast ref="uToast" />
		<u-datetime-picker :show="show" :closeOnClickOverlay="true" v-model="userInfo.birthday" mode="date"
			:minDate="23592663" @close="show = false" @cancel="show = false" @confirm="saveBday">
		</u-datetime-picker>
	</view>
</template>

<script>
	import {
		sj,
	} from "@/common/handutil.js";
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				phone: '',
				show: false,
				showTag: false,
				isCheck: [],
				userInfo: {
					sex: 1,
					birthday: '',
					mobile: '',
					realname: '',
					vipId:'',
				},
				range: [{
						value: 0,
						text: "VIP1"
					},
					{
						value: 1,
						text: "VIP2"
					},
					{
						value: 2,
						text: "VIP3"
					},
				],
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
				},
				groupList:[],
			}
		},
		onLoad(options) {
			this.phone = options.phone
			this.getVipList()
		},
		methods: {
			async saveBday(e) {
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
				this.userInfo.birthday = timeValue
				this.show = false
			},
			submit() {
				this.$refs.uForm.validate().then(async res => {
					this.userInfo.nickname = `用户_${sj()}`;
					let {
						msg,
						data
					} = await this.beg.request({
						url: this.api.cMember,
						method: 'POST',
						data: this.userInfo,
					})
					uni.$u.toast(msg)
					uni.redirectTo({
						url: `/pages/home/memberManage/memberInfo?id=${data && data.id}`
					})
				}).catch(errors => {
					uni.$u.toast(errors && errors[0].message)
				})
			},
			async getVipList() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.vipList
				})
				this.groupList = list ? list : []
				this.groupList.forEach((v)=>{
					  v.text = `${v.name}(VIP${v.level})`
					  v.value = v.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-line {
		display: none;
	}

	/deep/.u-form-item {
		border-bottom: 2rpx solid #eee;

		.u-radio__text {
			font-size: 32rpx !important;
		}
	}

	/deep/.desc .u-form-item {
		border: none !important;
	}

	/deep/.u-form-item__body__left__content__label {
		padding-left: 26rpx !important;
		font-size: 28rpx !important;
	}

	/deep/.u-input__content__field-wrapper__field {
		font-size: 28rpx !important;
		text-align: right !important;
	}

	/deep/.u-toolbar__wrapper__confirm {
		color: #49c265 !important;
	}

	.deal {
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
	}

	.but {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100%;
	}

	/deep/.u-radio-group--row {
		justify-content: flex-end !important;

		.u-radio {
			margin-left: 60rpx;
		}
	}

	/deep/.u-button__text {
		font-size: 16px !important;
	}

	/deep/.uni-select {
		border: none;
		text-align: right;

		.uni-select__input-placeholder {
			font-size: 28rpx !important;
			color: #c0c4cc !important;
		}
	}

	/deep/.u-form-item__body__right__content__slot {
		text-align: right;
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx !important;
	}

	/deep/.u-form-item__body__left__content__required {
		left: 1px !important;
		top: 9px !important;
	}
</style>